<template>
  <div class="map-existing">
    <div ref="map" class="echartsBox"></div>
  </div>
</template>

<script>
// 引入charts
import echarts from 'echarts';
// // 引入中国地图
import 'echarts/map/js/china.js'
import jsonp from 'jsonp';
export default {
  data() {
    return {
      data: []
    }
  },
  mounted() {
    var This = this;
    this.myChiar = echarts.init(this.$refs.map);
    // this.myChiar = echarts.init(document.querySelector('.echartsBox'));
    var option = this.option();
    this.myChiar.setOption(option)
    this.getData();
    window.addEventListener('resize', function () {
      This.myChiar.resize()
    });
  },
  methods: {
    // 请求接口
    getData() {
      // var url = "https://interface.sina.cn/news/wap/fymap2020_data.d.json";
      var url = "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427";
      jsonp(url, {}, (err, data) => {
        if (!err) {
          window.sessionStorage.setItem('existingData', JSON.stringify(data));
          var list = data.data.list.map(item => ({name: item.name, value: item.econNum}));
          this.data = list;
          var option = this.option();
          this.myChiar.setOption(option);
        } else {
          console.log('接口出错!!!');
        }
      });

      // 防止出错不显示数据
      var epidemicData = window.sessionStorage.getItem('existingData');
      if(!epidemicData) return;
      epidemicData = JSON.parse(epidemicData);
      var list = epidemicData.data.list.map(item => ({name: item.name, value: item.econNum}));
          this.data = list;
          var option = this.option();
          this.myChiar.setOption(option);
    },
    // 地图参数配置
    option() {
      return {
        // 标题
        title: {
          text: '中国地图'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b0}<br />确诊: {c0}'
        },
        series: {
          type: 'map', // 类型为地图
          map: 'china', // 中国地图
          zoom: 1, // 缩放比例
          itemStyle: {
            areaColor: '#eee' // 地图背景色
          },
          emphasis: {
            // 鼠标滑过样式
            label: {
              color: '#000'
            },
            itemStyle: {
              areaColor: '#fff'
            }
          },
          label: {
            show: true // 是否显示地区名字
          },
          data: this.data
        },
        visualMap: [{
          type: 'piecewise', // 分段式视觉组件
          pieces: [
            {min: 0, max: 9},
            {min: 10, max: 99},
            {min: 100, max: 999},
            {min: 1000, max: 9999},
            {min: 10000}
          ],
          itemWidth: 20,
          itemHeight: 10,
          inRange: {
            symbol: 'rect',
            color: ['#ffecec', '#4c0101']
          }
        }]
      }
    }
  }
}
</script>

<style scoped>
.map-existing {
  width: 100%;
  height: 100%;
}
.echartsBox {
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  margin: auto;
  width: 80%;
  height: 80%;
}
</style>

